import React from 'react';
import { Modal, Form, Input } from 'antd';

interface CreateMaterialLibraryModalProps {
  open: boolean;
  loading: boolean;
  onOk: (name: string) => void;
  onCancel: () => void;
}

const CreateMaterialLibraryModal: React.FC<CreateMaterialLibraryModalProps> = ({
  open,
  loading,
  onOk,
  onCancel,
}) => {
  const [form] = Form.useForm();

  const handleOk = async () => {
    try {
      const { name } = await form.validateFields();
      onOk(name);
      form.resetFields();
    } catch (e) {
      // 校验失败
    }
  };

  const handleCancel = () => {
    onCancel();
    form.resetFields();
  };

  return (
    <Modal
      open={open}
      title='新建材料库'
      onOk={handleOk}
      onCancel={handleCancel}
      confirmLoading={loading}
      okText='确认'
      cancelText='取消'
      maskClosable={false}
    >
      <Form
        form={form}
        layout='vertical'
        name='create_material_library_form'
      >
        <Form.Item
          name='name'
          label='材料库名称'
          rules={[{ required: true, message: '请输入材料库名称' }]}
        >
          <Input
            placeholder='请输入材料库名称'
            onPressEnter={handleOk}
          />
        </Form.Item>
      </Form>
    </Modal>
  );
};

export default CreateMaterialLibraryModal;
